import React from 'react'
import { Form, Upload, message, Button, Icon, Avatar, Card, Badge } from 'antd';
import QueueAnim from 'rc-queue-anim';
import Animate from 'rc-animate';
import Texty from 'rc-texty';
import TweenOne from 'rc-tween-one';
import PropTypes from 'prop-types';
import Autoset from './components/autoset'
import EffectDynamicChange from './components/effect-dynamic-change'

export default class Test extends React.Component {

  render() {
    const colors = [
      'pink',
      'red',
      'yellow',
      'orange',
      'cyan',
      'green',
      'blue',
      'purple',
      'geekblue',
      'magenta',
      'volcano',
      'gold',
      'lime',
      '#f50',
      '#2db7f5',
      '#87d068',
      '#108ee9',
    ];
    return (
      <>
        <style>
          {`
            .head-example {
              width: 42px;
              height: 42px;
              border-radius: 4px;
              background: #eee;
              display: inline-block;
              vertical-align: middle;
          }
          .ant-badge {
            margin-right: 30px;
        }
        }`}
        </style>

        <Card title="简单的徽章展示，当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示" extra={<a href="#">More</a>}>
          <Badge count={5}>
            <a href="#" className="head-example" />
          </Badge>
          <Badge count={0} showZero>
            <a href="#" className="head-example" />
          </Badge>
          <Badge count={<Icon type="clock-circle" style={{ color: '#f5222d' }} />}>
            <a href="#" className="head-example" />
          </Badge>
        </Card>

        <Card title="独立使用" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          <Badge count={25} />
          <Badge
            count={4}
            style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
          />
          <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
        </Card>

        <Card title="封顶数字" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          <Badge count={99}> <a href="#" className="head-example" /> </Badge>
          <Badge count={100}> <a href="#" className="head-example" /> </Badge>
          <Badge count={99} overflowCount={10}> <a href="#" className="head-example" /> </Badge>
          <Badge count={1000} overflowCount={999}> <a href="#" className="head-example" /> </Badge>
        </Card>


        <Card title="讨嫌的小红点" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          <Badge count={0} dot> <Icon type="notification" /> </Badge>
          <Badge dot> <Icon type="notification" /> </Badge>
          <Badge dot> <a href="#">Link something</a> </Badge>
        </Card>

        <Card title="状态点" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          <Badge status="success" />
          <Badge status="error" />
          <Badge status="default" />
          <Badge status="processing" />
          <Badge status="warning" />
          <br />
          <Badge status="success" text="Success" />
          <br />
          <Badge status="error" text="Error" />
          <br />
          <Badge status="default" text="Default" />
          <br />
          <Badge status="processing" text="Processing" />
          <br />
          <Badge status="warning" text="Warning" />
        </Card>

        <Card title="多彩徽标" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          {colors.map(color => (
            <Badge color={color} text={color} />
          ))}
        </Card>

        <Card title="动态" extra={<a href="#">More</a>} style={{ marginTop: 10, }} >
          <EffectDynamicChange></EffectDynamicChange>
        </Card>




      </>
    );
  }
};



// API#
// <Badge count={5}>
//   <a href="#" className="head-example" />
// </Badge>
// <Badge count={5} />
// 参数	                说明	类型	默认值	版本
// color	             自定义小圆点的颜色	string	-	3.16.0
// count	             展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏	ReactNode		
// dot	               不展示数字，只有一个小红点	boolean	false	
// offset	             设置状态点的位置偏移，格式为 [x, y]	[number, number]	-	
// overflowCount	     展示封顶的数字值	number	99	
// showZero	           当数值为 0 时，是否展示 Badge	boolean	false	
// status	             设置 Badge 为状态点	Enum{ 'success', 'processing, 'default', 'error', 'warning' }	''	
// text	               在设置了 status 的前提下有效，设置状态点的文本	string	''	
// title               设置鼠标放在状态点上时显示的文字	string	count	3.5.0
